<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>数据统计</el-breadcrumb-item>
			<el-breadcrumb-item>数据报表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card><ve-line :data="chartData"></ve-line></el-card>
	</div>
</template>

<script>
export default {
	data() {
		return {
			chartData: {
				columns: ['日期', '华东', '华南', '华北', '西部', '其他'],
				// columns:[],
				rows: [
					{ 日期: '2017-12-27', 华东: 1393, 华南: 1093, 华北: 1232, 西部: 1503, 其他: 1620 },
					{ 日期: '2017-12-28', 华东: 3530, 华南: 3230, 华北: 3026, 西部: 2980, 其他: 2635 },
					{ 日期: '2017-12-29', 华东: 2923, 华南: 2623, 华北: 2800, 西部: 3013, 其他: 2630 },
					{ 日期: '2017-12-30', 华东: 1723, 华南: 1423, 华北: 1856, 西部: 1684, 其他: 1359 },
					{ 日期: '2017-12-31', 华东: 3792, 华南: 3492, 华北: 3023, 西部: 3021, 其他: 2830 },
					{ 日期: '2018-1-1', 华东: 4593, 华南: 4293, 华北: 4136, 西部: 4659, 其他: 4010 }
				]
			}
		}
	},
	created() {
		this.getReportsList()
	},
	methods: {
		async getReportsList() {
			const { data: res } = await this.$http.get('reports/type/1')
			if (res.meta.status !== 200) {
				return this.$message.error('获取数据统计失败')
			}
			this.$message.success('获取数据统计成功')
			console.log(res.data)
			// 得到的数组第一列加入日期
			res.data.legend.data.unshift('日期')
			this.chartData.columns = res.data.legend.data
			var rows = []
			for (let i = 0; i < res.data.xAxis[0].data.length; i++) {
				rows[i] = {
					'日期':res.data.xAxis[0].data[i],
				}
			}
			// console.log(rows)
		}
	}
}
</script>

<style lang="scss" scoped></style>
